<template>
  <view class="plan_detail_root">
    <view class="plan_box">
      <view class="title_box">
        <view class="name">{{ plan.name }}</view>
        <view
          class="common_tag "
          :class="{
          tag_gray: plan.is_closed,
          tag_green: !plan.is_closed
        }"
        >
          {{ plan.is_closed ? '已关闭' : "未关闭" }}
        </view>
        <view class="with_flex_1" />
        <view class="btn_del">删除</view>
      </view>
      <view class="des">{{ plan.describe }}</view>
      <view class="with_flex">
        <view class="with_flex_1" />
        <view class="common_time">{{ plan.createTime }}</view>
      </view>
    </view>

    <view class="common_block with_top with_hor">药品列表</view>
    <view class="list_box">
      <view
        v-for="(item, index) in medicineList"
        :key="index"
        class="medicine_box"
      >
        <view class="name arrow_right with_bottom">{{ item.name }}</view>
        <view
          class="msg_item"
          v-for="(msg, index) in msgList"
          :key="index"
        >
          <view class="left">
            {{ msg.name }}：
          </view>
          <view class="right all">
            {{ item[msg.key] | emptyStr }}
          </view>
        </view>
        <view class="with_flex">
          <view class="with_flex_1" />
          <view class="btn_del">删除</view>
          <view class="btn_add">添加记录</view>
        </view>
      </view>
    </view>


    <view
      class="common_float_btn"
      @click="toAdd"
    />
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: { show: false },
      plan: {
        name: "急性支气管炎",
        describe: "第一次复诊：咳嗽有好转，依然有痰，咽喉疼痛较为明显",
        createTime: "2024-03-01",
        is_closed: false,
      },
      medicineList: [
        {
          name: "蓝芩口服液",
          usage: "口服",
          dosage: 10,
          unit: 'ml',
          interval_time: 8 * 60,
          count: 9,
          start_time: "2024-03-01 14:25:00",
          used: 1,
        },
        {
          name: "氨酚双氢可待因片",
          usage: "口服",
          dosage: 1,
          unit: '片',
          interval_time: 8 * 60,
          count: 9,
          start_time: "2024-03-01 14:25:00",
          used: 1,
        },
      ],
      msgList: [
        { name: "用法用量", key: "usage_str" },
        { name: "间隔时间", key: "interval_time_str" },
        { name: "开始时间", key: "start_time" },
        { name: "预计用药次数", key: "count_str" },
        { name: "已用药次数", key: "used_str" },
      ],
    };
  },
  methods: {
    toAdd() {

    },
  },
  mounted() { },
  created() {
    this.medicineList.forEach(e => {
      e.usage_str = e.usage + e.dosage + e.unit;
      e.interval_time_str = e.interval_time + " 分钟";
      e.count_str = e.count + " 次";
      e.used_str = e.used + " 次";
    });
  },
};
</script>

<style
  lang="scss"
  scoped
>
.plan_detail_root {
  background: #F8FAFE;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .plan_box {
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(61, 79, 124, 0.08);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 24rpx 40rpx;
    margin: 24rpx 40rpx 0;

    .title_box {
      display: flex;
      align-items: center;
    }

    .name {
      font-size: 34rpx;
      font-weight: 800;
      color: #0D1F4F;
      line-height: 48rpx;
      margin-right: 16rpx;
      margin-bottom: 16rpx;
    }

    .des {
      text-indent: 40rpx;
      margin: 12rpx 0;

      /*字体样式*/
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #0D1F4F;
      line-height: 40rpx;
    }

    .common_time {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 40rpx;
      color: #9DA7C0;
    }

  }

  .list_box {
    flex: 1;
    overflow: auto;
    padding: 24rpx 40rpx 1rpx;

    .medicine_box {
      padding-bottom: 24rpx;
      margin-bottom: 24rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(61, 79, 124, 0.08);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      padding: 24rpx 40rpx;

      .name {
        font-size: 34rpx;
        font-weight: 800;
        color: #0D1F4F;
        line-height: 48rpx;
      }
    }

  }

  .btn_del {
    color: #F42A42;
    font-size: 28rpx;
    margin-right: 24rpx;
  }

  .btn_add {
    color: #346BF8;
    font-size: 28rpx;
  }
}
</style>